<template>
  <div class="h-full">
    <DataScreenHeader
      :title="'大连金泰模具任务看板'"
      :showMonth="false"
      classes=""
    />

    <div class="h-[100%]">
      <div style="height: calc(100% - 100px)" class="flex w-[100%] mb-[10px]">
        <!-- 上左侧图表 -->
        <div style="height: 100%; overflow: hidden; flex: 1">
          <dv-border-box13 class="overflow-hidden">
            <div
              dv-bg
              class="flex justify-center items-center m-[20px]"
              style="flex-direction: column"
            >
              <div class="title">
                <span class="text">
                  {{ dayjs(new Date()).format("MM-DD") }}模具状态分布</span
                >
              </div>

              <JTMoldTaskPieChart
                style="height: 700px"
                key="1"
                id="1"
                :seriesData="pieData"
                @pieClick="onPieClick"
              />
            </div>
          </dv-border-box13>
        </div>
        <div style="height: 100%; overflow: hidden; flex: 1">
          <dv-border-box13 class="overflow-hidden">
            <div
              dv-bg
              class="flex justify-center items-center m-[20px]"
              style="flex-direction: column"
            >
              <div class="title">
                <span class="text">
                  {{ dayjs(new Date()).format("MM-DD") }}合格趋势图</span
                >
              </div>

              <JTMoldTaskScrollTable
                :planBIDTOS="pieTableData"
                :tableColumnNum="10"
                class="mt-[15px]"
              />
            </div>
          </dv-border-box13>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ScrollTableQuantity from "../components/ScrollTableQuantity.vue";
import { useTable, useDownload, useDictionary } from "@/utils/useTable";
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();
import dayjs from "dayjs";
defineOptions({
  name: "DATASCREENRL",
  inheritAttrs: false,
});

const props = defineProps({
  mesProducingMonthBI: {
    type: Object,
    default: () => {},
  },
  refreshRate: {
    type: Number,
    default: () => 0,
  },
  projectCode: {
    type: String,
    default: () => "",
  },
});

const emit = defineEmits(["get-info"]);
const { refreshRate, projectCode } = toRefs(props);

const dataList = ref({});
// watch(
//   () => mesProducingMonthBI,
//   (newVal) => {
//     if (newVal.value?.bodys?.length > 0) {
//       dataList.value = newVal.value;
//     }

//     // tableDataC.value.splice(0, 2);
//     // tableDataA.value.forEach((item, index) => {
//     //   item.name = mmA[index];
//     // });
//     // tableDataB.value.forEach((item, index) => {
//     //   item.name = mmB[index];
//     // });
//     // tableDataC.value.forEach((item, index) => {
//     //   item.name = mmC[index];
//     // });
//   },
//   {
//     deep: true,
//     immediate: true,
//   }
// );
watch(
  () => projectCode,
  (newVal) => {
    getProducingMonthBI();
  },
  {
    deep: true,
  }
);
let timer: any = ref(null);

const month = ref();
onMounted(() => {
  const date = new Date();
  month.value = String(date.getMonth() + 1); // 因为getMonth()返回的月份是从0开始计数的，所以需要加1
  getProducingMonthBI();
  // if (refreshRate.value) {
  //   timer.value = setInterval(() => {
  //     emit("get-info");
  //   }, refreshRate.value * 1000)
  // }
  timer.value = setInterval(() => {
    getProducingMonthBI();
  }, 10000);
});

// 第四个大屏数据
const pieTableData = ref([]);
const pieData = ref([]);
const status = ref("1");
const mesProducingMonthBI = ref([]);
const getProducingMonthBI = async () => {
  emit("get-info", true);
  await request({
    method: "post",
    url: `/eam/board/mouldStatus`,
    data: {
      statusList: [1, 2, 3, 6],
      projectCode: projectCode.value || "",
    },
  })
    .then((res) => {
      mesProducingMonthBI.value = res.data || [];

      pieData.value = mesProducingMonthBI.value.map((item: any) => {
        return {
          value: item.count,
          name: useDictionary("MouldStatus", item.status),
        };
      });
      mesProducingMonthBI.value.forEach((item: any) => {
        if (item.status == status.value) {
          pieTableData.value = item.details || [];
        }
      });

      emit("get-info", false);
    })
    .finally(() => {
      emit("get-info", false);
    });
};

function onPieClick(params) {
  // params.name 就是你要的状态字段

  dictionaryStore.filterDictList("MouldStatus").forEach((item) => {
    if (item.label == params.name) {
      status.value = item.value;
    }
  });
  mesProducingMonthBI.value.forEach((item: any) => {
    if (item.status == status.value) {
      pieTableData.value = item.details || [];
    }
  });
}

onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style lang="scss" scoped>
.title {
  background-image: url(@/assets/images/screen/bg-title.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  width: auto;
  height: 30px;
  line-height: 30px;
  .text {
    font-size: 32px;
    padding-left: 30px;
    // font-weight: 600;
    font-family: YOUSHE;
    writing-mode: horizontal-tb;
    text-orientation: upright;
    color: transparent;
    background: linear-gradient(
        0deg,
        rgb(255, 255, 255) 0px,
        rgb(255, 255, 255) 100%
      )
      text;
    clip-path: inset(1px);
  }
}
.bgchart {
  // background: rgba(15, 36, 62, 0.6);
  background: rgba(88, 175, 255, 0.1);
  height: 100%;
  margin: 0px 5px;

  // background-image: url(@/assets/images/screen/preview10.png);
  // background-repeat: no-repeat;
  // background-size: cover;
  // background-position: left;
}
.charts_des {
  margin-top: -50px;
  color: #838a9d;
  font-size: 13px;
  font-family: "DINLight";
}
.squary {
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 3px;
  margin-right: 3px;
}
</style>
